<template>
  <div :class="['sound_container',isShow == true ? 'hide' :'']">
    <!-- 音轨详情 -->
    <!--  播放 -->
    <play-sound
      :id="playObj.id"
      :duration="playObj.duration"
      :img="playObj.img"
      :playPath="playObj.playPath"
      :title="playObj.title"
      :next="playObj.next"
      :prev="playObj.prev"
      :playCount="playObj.playCount"
    ></play-sound>

    <play-album
      :albumId="albumObj.albumId"
      :title="albumObj.title"
      :subscribeCount="albumObj.subscribeCount"
      :trackCount="albumObj.trackCount"
      :img="albumObj.img"
      :richIntro="playObj.richIntro"
    ></play-album>

    <track-list
      :albumId="albumId"
      :list="list"
      :totalCount="totalCount"
      @add-more="addLoadMore"
    ></track-list>

    <xs-album :id="albumObj.albumId"></xs-album>
    <zb-comp :userInfo="userInfo" :userListAlbum="userListAlbum"></zb-comp>
    <play-comment :trackid="trackid"></play-comment>
    <jd-album :id="albumObj.albumId"></jd-album>
    <my-footer></my-footer>

    <float-open></float-open>
    <go-login v-if="playObj.albumVipPayType > 0"></go-login>
    <!-- <vip-comp></vip-comp> -->
    <my-load v-if="isShow"></my-load>
  </div>
</template>

<script>
import PlaySound from "@/views/sound/soundcomp/PlaySound.vue";
import PlayAlbum from "@/views/sound/soundcomp/PlayAlbum.vue";
import TrackList from "@/views/sound/soundcomp/TrackList.vue";
import PlayComment from "@/views/sound/soundcomp/PlayComment.vue";

import { initSoundData } from "@/request/api.js";
import { initAlbumListData } from "@/request/api.js";
import { initzhuboDetailData } from "@/request/api.js";

export default {
  name: "MySound",
  data() {
    return {
      albumId: 0,
      trackid: 0,
      anchorId: 0,
      playObj: {},
      albumObj: {},
      list: [],
      page: 1,
      pageSize: 10,
      totalCount: 0,

      userInfo: {},
      userListAlbum: [],
      isShow: false,
    };
  },
  watch:{
    isShow(val){
      if(val){
        document.body.style.position = 'fixed'
      }else{
        document.body.style.position = 'static'
      }
    }
  },
  components: {
    PlaySound,
    PlayAlbum,
    TrackList,
    PlayComment,
  },
  created() {
    this.trackid = this.$route.params.id - 0;
    this.initData();
  },
  methods: {
    async initData() {
      let flag = localStorage.getItem("flag");
      if (flag) {
        this.isShow = flag;
      }

      let { data: res } = await initSoundData(this.trackid);
      console.log("8888",res)

      let data = res.data;
      (this.albumId = data.albumDetailInfo.id),
        (this.anchorId = data.anchorInfo.id),
        console.log("==>666", data);
      this.playObj = {
        id: data.id,
        anchorId: data.anchorInfo.id,
        img:
          "https://imagev2.xmcdn.com/" + data.trackDetailInfo.trackInfo.cover,
        title: data.trackDetailInfo.trackInfo.title,
        playPath: data.trackDetailInfo.trackInfo.playPath,
        duration: data.trackDetailInfo.trackInfo.duration,
        next: data.nextTrackUrl,
        prev: data.preTrackUrl,
        richIntro:data.trackRichInfo.richIntro,
        albumVipPayType:data.albumVipPayType,
        playCount:data.trackDetailInfo.statCountInfo.playCount
      };

      

      this.albumObj = {
        albumId: data.albumDetailInfo.id,
        title: data.albumDetailInfo.albumInfo.title,
        statCountInfo: data.albumDetailInfo.statCountInfo,
        subscribeCount: data.albumDetailInfo.statCountInfo.subscribeCount,
        trackCount: data.albumDetailInfo.statCountInfo.trackCount,
        img:
          "https://imagev2.xmcdn.com/" + data.albumDetailInfo.albumInfo.cover,
      };
  document.title = this.playObj.title+"_"+this.albumObj.title
      let list = [];
      let { data: req } = await initAlbumListData({
        page: this.page,
        pageSize: this.pageSize,
        albumId: this.albumId,
        countKeys: "play,comment",
      });

      this.totalCount = res.data.totalCount;
      req.data.trackDetailInfos.forEach((item) => {
        let obj = {
          trackid: item.id,
          title: item.trackInfo.title,
        };

        list.push(obj);
      });
      this.list.push(...list);

     if (this.list.length > 0) {
        this.isShow = false;
        localStorage.setItem("flag", this.isShow);
      }

      this.foo();
    },

    async addLoadMore(val) {
      this.page = val;
      let list = [];
      let { data: req } = await initAlbumListData({
        page: this.page,
        pageSize: this.pageSize,
        albumId: this.albumId,
        countKeys: "play,comment",
      });

      this.totalCount = req.data.totalCount;
      req.data.trackDetailInfos.forEach((item) => {
        let obj = {
          trackid: item.id,
          title: item.trackInfo.title,
        };

        list.push(obj);
      });
      this.list.push(...list);
      console.log(req);
    },

    async foo() {
      let { data: result } = await initzhuboDetailData(this.anchorId);
      let res = result.data;
      let list = res.anchorAlbumPageRecords.albumBriefDetailInfos;
      console.log(res);
      this.userInfo = {
        anchorId: res.anchorId,
        url: res.anchorInfo.url,
        img: "https://imagev2.xmcdn.com/" + res.anchorInfo.userInfo.logo,
        nickname: res.anchorInfo.userInfo.nickname,
        des: res.anchorInfo.userInfo.personalSignature,
        anchorGrade: res.anchorInfo.userInfo.anchorGrade,
        statCountInfo: res.anchorInfo.statCountInfo,
      };

      for (let i = 0; i < 3; i++) {
        if (list[i]) {
          let obj = {
            id: list[i].id,
            img: "https://imagev2.xmcdn.com/" + list[i].albumInfo.cover,
            title: list[i].albumInfo.title,
            countInfo: list[i].statCountInfo,
          };

          this.userListAlbum.push(obj);
        }
      }
    },
  },
  mounted() {
    document.body.style.background = "#f0f0f0";
     
  },
  destroyed() {
    document.body.style.background = "#ffffff";
    document.body.style.position = 'static'
  },
};
</script>

<style lang="scss" scoped>

/deep/ .xs {
  background-color: #fff;
  margin: 11px 0;
}
/deep/ .zhubo {
  background-color: #fff;
  margin-bottom: 10px;
}
/deep/ .jd_wrap {
  background-color: #fff;
  margin-top: 0;
  padding-top: 15px;
}
</style>

